<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="./js/vue.js"></script>
		<script src="./js/asiox.js"></script>
		<script src="./js/common.js"></script>
		<script src="./js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header >
					<div style="margin-top: 10px;">
						<span >当前用户:{{user.username}}</span>
						<el-button style="float: right; color:b;" @click="logout"  type="text" >退出</el-button>
					</div>	
					</el-header>
				<el-container>
					<el-aside width="200px" class="one">
						<el-tree default-expand-all :data="list" :props="defaultProps"
							@node-click="handleNodeClick">
							<span class="" slot-scope={node,data}>
								<span>
									<i :class="data.iconcls"></i>
									{{node.label}}
								</span>
							</span>
							
							
							</el-tree>
					</el-aside>
					<el-main>
						<iframe :src="src" frameborder="0px" style="width: 100%;height: 100%;"></iframe>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
</html>
<script>
	new Vue({
		el: "#app",
		data: {
			src: "",
			list: [
				// {
				// 	label: '一级 2',
				// 	children: [{
				// 		label: '单选按钮',
				// 		href: "单选按钮.html"

				// 	}],

				// },
				// {
				// 	label: '一级 3',
				// 	children: [{
				// 		label: '表格',
				// 		href: "表格.html"
				// 	}]
				// }
			],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			user: {
				userid: "",
				username: "",
				userpass: "",
				state: "",
				phone: "",
				rolename: "",
			},
		},
		methods: {
			logout(){
				this.$confirm('确定退出吗？')
					.then(_ => {
						window.localStorage.removeItem("token")
						window.location.href="login.html"
					})
					.catch(_ => {});
				
			},
			handleNodeClick(data) {
				console.log(data);
				console.log(data.href);
				this.src = data.href
			},
			init(){
				// alert(this.token)
				axios.get(API+"selectusermen").then((res) => {
					console.log(res);
					let s=arrayToTree(res.data.data.menuinfos)
					this.list=s
					this.user=res.data.data.userinfo
					}).catch(err=>{
						console.log(err);
					})
			}
		},
		created() {
			this.init()
			}



		

	})
</script>
<style>
	* {
		margin: 0px;
		padding: 0px;
	}

	.el-header {
		/* 头部 */
		border-bottom: 1px solid #f5f2f0;
		/* 从左下到右上的对角线渐变 */
		/* background: linear-gradient(to top left, #f07c82, #ffd111 100%); */
		background-color: #f9c6ff;
	}

	.el-aside {
		/* 侧边(左边) */
		border-right: 1px solid #f5f2f0;
		position: absolute;
		top: 60px;
		bottom: 0px;
		/* background: linear-gradient(to top left, #f347ff, #f07c82, #ffd111 100%); */
		background-color: #f9c6ff;

	}

	.el-main {
		/* 侧边(右边) */
		border: 1px solid #f5f2f0;
		position: absolute;
		left: 200px;
		right: 0px;
		top: 60px;
		bottom: 0px;


	}

	.el-footer {
		border: 1px solid palegreen;
		position: absolute;
		bottom: 0px;
		right: 0px;
		left: 0px;
	}
</style>